<template>
	<div :class="'bg-white p-1'">
		<Row class="m-1">
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
				<Input class="w-100"v-model="phone" placeholder="请输入检索客户电话" />
			</Col>
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
				<Input class="w-100" v-model="originalCode" placeholder="请输入检索微信订单编号" />
			</Col>
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
				<Select class="w-100" clearable v-model="statu" placeholder="请选择订单状态" >
					<Option value="ST">已开始</Option>
					<Option value="UNPAY">未支付</Option>
					<Option value="FIN">已结束</Option>
				</Select>	
			</Col>
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
				<Select class="w-100" clearable v-model="storeId" placeholder="请选择门店">
					<Option v-for="store in stores" :key="store.storeId" :value="store.storeId">{{store.name}}</Option>
				</Select>
			</Col>  
		</Row>
		<Row class="m-1">
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
				<Select class="w-100" clearable v-model="type" placeholder="请选择订单支付类型" >
					<Option value="P">支付</Option>
					<Option value="C">卡扣</Option>
					<Option value="V">券扣</Option>
				</Select>
			</Col>
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
				<Date-picker class="w-100" type="datetime" format="yyyy-MM-dd HH:mm:ss" @on-change="stChange" placeholder="请选择开始时间"></Date-picker>
			</Col>
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
				<Date-picker class="w-100" type="datetime" format="yyyy-MM-dd HH:mm:ss" @on-change="etChange" placeholder="请选择结束时间"></Date-picker>
			</Col>
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
				<Button class="float-right" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
			</Col>
		</Row>
		<div class="mt-1 d-xl-none">
			<Row class="bg-white border-top border-dark">
			
				<Col v-for="(order, index) in tableInfo.data" :xs="24" :sm="12" :md="8" :lg="8" :xl="6" :xxl="6"
					class="p-1 mt-2">
				<div class="shadow p-3 radius text-xs text-secondary">
					<div class="p-1 d-flex justify-content-between">
						<span>订单编号</span>
						<span>{{order.orderId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>客户名称</span>
						<span>{{order.clientName}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>客户电话</span>
						<span>{{order.phone}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>开始时间</span>
						<span>{{order.st}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>结束时间</span>
						<span>{{order.et}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>订单状态</span>
						<span v-if="order.statu == 'ST'">已开始</span>
						<span v-if="order.statu == 'UNPAY'">未支付</span>
						<span v-if="order.statu == 'FIN'">已结束</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>支付类型</span>
						<span v-if="order.type == 'P'">支付</span>
						<span v-if="order.type == 'C'">卡扣</span>
						<span v-if="order.type == 'V'">券扣</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>门店</span>
						<span>{{order.storeName}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>支付平台支付编号</span>
						<span>{{order.originalCode}}</span>
					</div>
					<div class="p-1 d-flex justify-content-end text-sm">
						<Button type="error" @click="remove(order.orderId)" ghost>删除</Button>
						<Button type="primary" class="ml-3" @click="show(order.orderId)" ghost>详细</Button>
						
					</div>
				</div>
				</Col>
			</Row>
		</div>
		<div class="mt-1 d-none d-xl-block">
			<Table border class="m-1" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="amount">
					<span class="text-danger">￥{{util.parseMoney(row.amount / 100, 2)}}</span>
				</template>	
				phone
				<template slot-scope="{ row, index }" slot="phone">
					<a @click="toClient(row.clientId)" class="text-primary">{{row.phone}}</a>
				</template>
				<template slot-scope="{ row, index }" slot="statu">
					<span v-if="row.statu == 'ST'">已开始</span>
					<span v-if="row.statu == 'UNPAY'">未支付</span>
					<span v-if="row.statu == 'FIN'">已结束</span>
				</template>
				<template slot-scope="{ row, index }" slot="type">
					<span v-if="row.type == 'P'">支付</span>
					<span v-if="row.type == 'C'">卡扣</span>
					<span v-if="row.type == 'V'">券扣</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.orderId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.orderId)">删除</Button>
				</template>
			</Table>
			
		</div>
		<div>
			<Page :class="'m-2 text-right'" :page-size="size" @on-change="searchPage" :total="total" />
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				clientName: "",
				type: "",
				statu: "",
				status:"",
				st: "",
				et: "",
				storeId: "",
				originalCode:"",
				phone:"",
				current: 1,
				size: 10,
				total: 0,
				tableInfo: {
					columnInfo: [
						{
							title: "订单编号",
							key: "orderId",
							width: 65,
						},
						{
							title: "客户名称",
							key: "clientName",
							width:100,
						},
						{
							title: "客户电话",
							slot: "phone",
							width:150,
						},
						{
							title: "开始时间",
							key: "st",
							width: 164,
						},
						{
							title: "结束时间",
							key: "et",
							width: 164,
						},
						{
							title: "订单状态",
							slot: "statu",
							width: 100,
						
						},
						{
							title: "支付类型",
							slot: "type",
							width: 70,
						},
						{
							title: "门店",
							key: "storeName",	
							width:150
						},
						{
							title: "支付平台支付编号",
							key: "originalCode",	
							width:225,	
						},
						{
							title: "操作",
							slot: 'action',
							
						}
					],
					data: []
				},
				stores:[]
			}
		},
		methods:{
			toClient(clientId){
				this.$router.push({
					path: "client/detail?clientId=" + clientId,
				});
			},
			stChange(e) {
				this.st = e;
			},
			etChange(e) {
				this.et = e;
			},
			init() {
				this.searchStores();
				this.search();
			},
			search(){
				this.current = 1 ;
				this.searchOrders();
			},
			searchOrders() {
				this.http.get({
					url:"/order/page",
					param:{
						clientName:this.clientName,
						type:this.type,
						statu:this.statu,
						st:this.st,
						et:this.et,
						phone: this.phone,
						storeId:this.storeId,
						current:this.current,
						size:this.size,
						originalCode:this.originalCode
					}
				}).then(response => {
					this.current = response.current;
					this.total = response.total;
					this.size = response.size;
					this.tableInfo.data = response.records;
					// console.log(this.tableInfo.data);
					// if(this.tableInfo.data.statu == "ST"){
					// 	this.status == "已开始";
					// }
					// if(this.tableInfo.data.statu == "UNPAY"){
					// 	this.status == "未支付";
					// }
					// if(this.tableInfo.data.statu == "FIN"){
					// 	this.status == "已结束";
					// }
				});
			},
			searchPage(page) {
				this.current = page;
				this.searchOrders();
			},
			searchStores() {
				this.http.get({
					url:"/store/store/info"
				}).then(response => {
					this.stores = response
				})
			},
			remove(orderId) {
					this.message.confirm({
						title: "删除提示",
						content: "即将删除订单，确定吗？",
						onOk: () => {
							this.http.delete({
								url: "/order",
								param: {
									orderId
								}
							}).then(data => {
								this.message.info('删除成功');
								this.search();
							});
						},
						onCancel: () => {
							this.message.info('操作已取消');
						}
					});
				},
			show(orderId) {
				this.$router.push({
					name:"order_detail",
					params:{
						orderId
						}
					});
				}
			},
		created(){
			this.init();
		}
	}
</script>

<style>

</style>
